<template>
  <div class="couphe">
    <header>
      <dl class="family">
        <dt>
          <img :src="family.avatar" alt="" />
        </dt>
        <dd>
          <p class="title">
            <img src="../assets/img/brand@2x.png" alt="" />
            <span>{{ family.name }}</span>
          </p>
          <p class="child">
            {{ family.description }}/{{ family.deliveryTime }}分钟送达
          </p>
          <div class="male">
            <img src="../assets/img/decrease_1@2x.png" alt="" />
            <span>{{ family.supports[0].description }},满50减10</span>
            <p class="type">
              <span>{{ family.supports.length }}个</span>
              <van-icon name="arrow" color="#fff" size="3" />
            </p>
          </div>
        </dd>
      </dl>
      <div id="wife">
        <img src="../assets/img/bulletin@2x.png" alt="" />
        <span class="van-ellipsis">{{ family.bulletin }}</span>
        <van-icon name="arrow" color="#fff" size="5" />
      </div>
    </header>
    <!-- 首页导航 -->
    <van-tabbar
      v-model="active"
      active-color="#ee0a24"
      inactive-color="#000"
      :fixed="false"
    >
      <van-tabbar-item>商品</van-tabbar-item>
      <van-tabbar-item>评价</van-tabbar-item>
      <van-tabbar-item>商家</van-tabbar-item>
    </van-tabbar>
    <!-- 热销榜 -->
    <section>
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            :title="item.name"
            v-for="(item, index) in goods"
            :key="index"
          />
        </van-sidebar>
      </div>
      <!-- 单人特色套餐 -->
      <div class="right">
        <div class="single" v-for="(item, index) in goods" :key="index">
          <span>{{ item.name }}</span>
          <van-card
            v-for="(it, key) in item.foods"
            :key="key"
            :price="it.price + '.00'"
            :desc="it.description"
            :title="it.name"
            :thumb="it.image"
          >
            <template #tags>
              <span>月售1132份 好评率100%</span>
            </template>
            <template #footer>
              <van-button
                icon="minus"
                type="info"
                size="mini"
                :round="true"
              ></van-button>
              <span class="num">1</span>
              <van-button
                icon="plus"
                type="info"
                size="mini"
                :round="true"
              ></van-button>
            </template>
          </van-card>
        </div>
      </div>
    </section>
    <!-- 底部结算 -->
    <div class="foot">
      <div class="zuo">
        <div class="tent">
          <p class="icon">
            <van-icon
              name="shopping-cart"
              size="24"
              color="rgba(255, 255, 255, 0.4)"
            />
          </p>
          <p class="ling">￥0</p>
          <span class="pei">另需配送费￥4元</span>
        </div>
      </div>
      <div class="you">
        <p>￥20起送</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "couphe",
  data() {
    return {
      family: [], //头部
      goods: [], //侧边导航
      active: "",
      activeKey: 0,
    };
  },
  mounted() {
    this.record();
  },
  computed: {},
  methods: {
    async record() {
      let { data } = await this.$http.get("/mock/data.json");
      console.log(data);
      this.family = data.seller;
      this.goods = data.goods;
    },
  },
};
</script>
<style lang="scss" scoped>
.couphe {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 50px;
}
header {
  height: 140px;
  background: black;
  background-color: rgba(7, 17, 27, 0.5);
  padding-top: 24px;
}
.family {
  display: flex;
  & > dt {
    img {
      width: 64px;
      height: 64px;
      border-radius: 4px;
      margin: 0px 16px 18px 24px;
    }
  }
  & > dd {
    flex: 1;
  }
}
.title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 2px 0 8px 0;
}
.title img {
  margin-right: 6px;
  height: 16px;
}
.title span {
  font-size: 16px;
  color: rgb(255, 255, 255);
  font-weight: bold;
  line-height: 16px;
}
.child {
  font-size: 12px;
  color: rgb(255, 255, 255);
  font-weight: 200;
  line-height: 12px;
}
.male {
  display: flex;
  align-items: center;
  margin-top: 10px;
  img {
    height: 12px;
    margin: 0 4px 2px 0;
  }
  span {
    font-size: 10px;
    color: rgb(255, 255, 255);
    font-weight: 200;
    line-height: 12px;
  }
}
.type {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 4px 5px;
  border-radius: 13px;
  display: flex;
  justify-content: flex-end;
  margin-left: 10%;
  span {
    font-size: 10px;
    color: rgb(255, 255, 255);
    font-weight: 200;
    line-height: 12px;
  }
}
#wife {
  height: 31px;
  background-color: rgba(7, 17, 27, 0.2);
  padding: 0 12px;
  display: flex;
  align-items: center;
  img {
    height: 12px;
    margin-right: 4px;
  }
  span {
    font-size: 10px;
    color: rgb(255, 255, 255);
    font-weight: 200;
    line-height: 31px;
  }
}
section {
  height: 100%;
  display: flex;
  overflow: auto;
}
.left {
  width: 20%;
}
.right {
  width: 80%;
  background: #f4f5f7;
  & > .single {
    width: 100%;
    .con {
      width: 100%;
      height: 170px;
      background: #fff;
      border-bottom: 1px solid gainsboro;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      dl {
        width: 100%;
        height: 100%;
        img {
          width: 70px;
          height: 70px;
        }
      }
    }
  }
}
.foot {
  position: absolute;
  left: 0;
  bottom: 0;
  background: chartreuse;
  width: 100%;
  height: 60px;
  background: #141d27;
  display: flex;
  .zuo {
    width: 70%;
    .tent {
      display: flex;
      align-items: center;
    }
  }
  .icon {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 5px solid #141d27;
    margin: -5px 10px 24px 18px;
  }
  .ling {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 24px;
    font-weight: 700;
    padding-right: 8px;
    border-right: 1px solid gainsboro;
  }
  .pei {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 24px;
    margin-left: 8px;
  }
  .you {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    background: #2b333b;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 700;
    line-height: 24px;
  }
}
.van-card:not(:first-child) {
  border-bottom: 1px solid gainsboro;
  margin-top: 0;
}
.num {
  margin-left: 5px;
}
</style>
